<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
</head>
<body onload="draw()">

<div id="container">
    <canvas id="mycanvas" width="150" height="150">Your Browser does not support Canvas, please upgrade</canvas>
</div>

<script>
    // 需求：简单创建一个填充矩形的径向渐变的效果
    function draw() {
        const canvas = document.getElementById("mycanvas");
        const ctx = canvas.getContext("2d");
        // 创建径向渐变的路径
        const radialGradient = ctx.createRadialGradient(75, 75, 10, 75, 75, 50);
        radialGradient.addColorStop(0, "orange");
        radialGradient.addColorStop(0.7, "purple");
        radialGradient.addColorStop(1, "green");
        ctx.fillStyle = radialGradient;
        ctx.fillRect(0, 0, 150, 150);
    };
</script>
</body>
</html>